<template>
  <div>
    <!-- 招聘会预定 -->
    <div class="booking"></div>
    <div class="job_LocationSelection">
      <!-- <div class="booking_position">位置选择</div> -->
      <div class="job_selection">
        <el-scrollbar :native='false' wrapStyle="" wrapClass="" viewClass="" viewStyle="" :noresize="false"
          tag="section">
          <div class="select_Choice">
            <div class="job_seat_wai" :class="[{'job_seat_Selection' : job_seat_Selection_index == index}]"
              v-for="(item,index) in boothNum" :key="index" @click="job_seat(item, index)">
              <span class="job_seat"
                :class="statusText[(item.auditStatus ||(item.auditStatus==0) && item.auditStatus >= 0) ? item.auditStatus : 2][0]">{{item.place}}</span>
              <!-- <span class="job_seat">{{item}}</span> -->
            </div>
          </div>
        </el-scrollbar>
        <div class="job_Explain">
          <div class="reservationPosition">
            <span>预约位置</span>
            <input type="text" v-model="PositionVal" readonly>
          </div>
          <div class="reservationStatus">
            <div>
              <span></span>
              可预约
            </div>
            <div>
              <span></span>
              预约审核中
            </div>
            <div>
              <span></span>
              已预约
            </div>
            <div>
              <span></span>
              预留不可预约
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { jobfairforword } from '../../../../api/JobFair'
export default {
  name: 'localationSelection',
  props: {
    place: {
      type: Number | String,
      default: 0
    },
    regionVal: {
      type: Number | String,
      default: 0
    }
  },
  watch: {
    regionVal: {
      handler (newValId, oldId) {
        if (newValId) {
          this.boothNum = 0
          this.jobfairforword(newValId)
          this.PositionVal = ''
        }
      }
    },
    place: {
      handler (newName, oldName) {
        this.PositionVal = newName
      },
      immediate: true
    }
  },
  data () {
    return {
      // 选中索引
      job_seat_Selection_index: -1,
      // 对应不同状态 显示不同按钮 以及颜色
      statusText: {
        // 0: ['reviewProgress', '预约审核中'],
        // 1: ['Booked ', '已预约'],
        // 2: ['notAllowed', '预留不可预约'],
        // 3: ['Reservations', '可预约']
        //  空 和 2 代表与预约
        0: ['reviewProgress', '预约审核中'],
        1: ['Booked ', '已预约'],
        3: ['notAllowed', '预留不可预约'],
        2: ['Reservations', '可预约']
      },
      // 预约位置 place
      PositionVal: '',
      // 站台个数
      boothNum: 0
    }
  },
  methods: {
    // 选择座位
    job_seat (val, index) {
      if (val.auditStatus == 1 || val.auditStatus == 3 || val.auditStatus == 0) return
      // this.job_seat_Selection_index = index
      // this.PositionVal = index
      this.job_seat_Selection_index = index
      this.PositionVal = val.place
      this.$emit('jobseatNum', val.place)
      //   this.open()
    },
    open () {
      this.$confirm('当前展位已有5家企业正在排队预约审核中，您可选择其他展位，如其他企业审核成功，将取消您的预约。', '', {
        confirmButtonText: '继续预约',
        cancelButtonText: '看看别的',
        customClass: 'message-logout'
      }).then(() => {
        this.$message({
          type: 'info',
          message: '继续预约!'
        });
      }).catch(() => {
        this.$message({
          type: 'success',
          message: '看看别的'
        });
      });
    },
    // 招聘会预定 接口请求
    jobfairforword (id) {
      if (!id) return false
      jobfairforword(id).then(data => {
        // 对请求出来的数据进行逻辑处理
        // console.log(data, 'jobfairforword 招聘会预定');
        if (data.success) {
          let datas = data.data
          // 站台个数
          // this.boothNum = datas.boothNum - 0 // 返回字符串 变为数字（隐式转换） 

          // 先获取到 预留不可预约 的数据
          let retainBoothArr = []
          if (datas.retainBooth) {
            let numberString = ''
            datas.retainBooth.split(',').map((v, i) => {
              // 判断每一项是否包含 “-”
              if (v.indexOf('-') != -1) {
                // 把中间数字循环出来
                for (var y = Number(v.split('-')[0]); y <= Number(v.split('-')[1]); y++) {
                  // 判断是否是最后一个 如果是 把“，”去掉
                  // if (y == Number(v.split('-')[1])) {
                  //   numberString += y
                  // } else {
                  numberString += y + ','
                  // }
                }
              } else {
                /**
                 * feat:
                 * 这里是不带 “-”的数据
                 * 判断是否是最后一个 如果是 把“，”去掉
                 * */
                // if (datas.retainBooth.split(',').length - 1 == i) {
                //   numberString += v
                // } else {
                numberString += v + ','
                // }
              }
            })
            // 去重
            numberString = Array.from(new Set(numberString.split(',')))
            numberString.map((v, i) => {
              let objList = {}
              // feat: 这里的V 是一个数字 有可能为 空
              if (v) {
                objList.auditStatus = 3
                objList.place = v - 0
                retainBoothArr.push(objList)
              }
            })

            // 获取 总数展位 
            let allNum = datas.boothNum - 0
            // 创建站数位对象（个数）
            let allNumarr = Array(allNum).fill({})

            // 总站数位的 数组 （全部数据）
            let ReservationArr = []

            let newArr = [...datas.list, ...retainBoothArr]

            allNumarr.map((v, i) => {
              let obj = {}
              obj.auditStatus = 2,
                obj.place = i + 1 - 0
              ReservationArr.push(obj)
            })

            // 总站数位的 与（预留不可预约和当前约审核中和已预约 的数据） 去循环遍历 
            let array = []
            ReservationArr.forEach((i, index) => {
              let flag = false
              newArr.forEach((j, jdex) => {
                if (i.place == j.place) {
                  flag = true
                }
              })
              if (!flag) {
                array.push(i)
              }
            })
            let sortArr = [...datas.list, ...retainBoothArr, ...array]
            // 对数据进行正序排序
            sortArr.sort(function (a, b) {
              return a.place - b.place;
            });
            this.boothNum = sortArr
            // console.log(this.boothNum, 'this.retainBooth')
          } else {
            // 获取 总数展位 
            let allNum = datas.boothNum - 0
            // 创建站数位对象（个数）
            let allNumarr = Array(allNum).fill({})

            // 总站数位的 数组 （全部数据）
            let ReservationArr = []

            allNumarr.map((v, i) => {
              let obj = {}
              obj.auditStatus = 2,
                obj.place = i + 1 - 0
              ReservationArr.push(obj)
            })

            // 总站数位的 与（预留不可预约和当前约审核中和已预约 的数据） 去循环遍历 
            let array = []
            let newArr = [...datas.list, ...retainBoothArr]
            ReservationArr.forEach((i, index) => {
              let flag = false
              newArr.forEach((j, jdex) => {
                if (i.place == j.place) {
                  flag = true
                }
              })
              if (!flag) {
                array.push(i)
              }
            })
            let sortArr = [...datas.list, ...array]
            // 对数据进行正序排序
            sortArr.sort(function (a, b) {
              return a.place - b.place;
            });
            this.boothNum = new Set(sortArr)
          }
        }
      })
    }
  },
  created () {
    this.jobfairforword()
  }
}
</script>

<style scoped>
/* 展位位置 -位置选择组件*/
/* .booking{
        height: 69px;
        line-height: 69px;
        text-align: left;
        text-indent: 45px;
        font-size:20px;
        font-family:PingFang SC;
        font-weight:600;
        color:rgba(34,34,34,1);
        opacity:1;
        border-bottom: 2px solid rgba(232,232,232,1);
        background:rgba(255,255,255,1);
    } */
.job_LocationSelection {
    width: 100%;
    /* height: 359px; */
    background: #ffffff;
}
.booking_position {
    height: 67px;
    line-height: 67px;
    text-align: left;
    text-indent: 45px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(34, 34, 34, 1);
    position: relative;
}
.booking_position:after {
    width: 28px;
    height: 2px;
    content: '';
    position: absolute;
    bottom: 22px;
    left: 44px;
    background: #1893fc;
}

.job_selection {
    /* height: 292px; */
    border: 2px solid rgba(248, 248, 248, 1);
    margin: 0 auto;
}
/* 解决自定义滚动条 x 轴显示问题 */
.el-scrollbar__wrap {
    overflow-x: hidden;
}
.select_Choice {
    max-height: 211px;
    width: calc(100% - 20px);
    justify-content: flex-start;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-top: 17px;
    padding-left: 20px;
}
.job_Explain {
    height: 64px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(248, 248, 248, 1);
}
.reservationPosition {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 20px;
    color: rgba(85, 85, 85, 1);
}
.reservationPosition input {
    width: 64px;
    height: 40px;
    line-height: 40px;
    margin: 0 69px 0 18px;
    text-align: center;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(232, 232, 232, 1);
    opacity: 1;
}
.reservationStatus {
    display: flex;
}
.reservationStatus div {
    margin-right: 42px;
}
.reservationStatus div:nth-child(1) span {
    width: 16px;
    height: 16px;
    display: inline-block;
    background: rgba(21, 155, 62, 1);
    vertical-align: middle;
    opacity: 1;
    border-radius: 2px;
}
.reservationStatus div:nth-child(2) span {
    width: 16px;
    height: 16px;
    display: inline-block;
    background: #fca428;
    vertical-align: middle;
    opacity: 1;
    border-radius: 2px;
}
.reservationStatus div:nth-child(3) span {
    width: 16px;
    height: 16px;
    display: inline-block;
    background: #fd4e40;
    vertical-align: middle;
    opacity: 1;
    border-radius: 2px;
}
.reservationStatus div:nth-child(4) span {
    width: 16px;
    height: 16px;
    display: inline-block;
    background: #cccccc;
    vertical-align: middle;
    opacity: 1;
    border-radius: 2px;
}

.job_seat_Selection {
    width: 48px !important;
    height: 48px !important;
    border: 2px solid rgba(21, 155, 62, 1);
    margin: 13px 26.5px !important;
    border-radius: 6px;
    background: #ffffff;
}
.job_seat_wai {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 17px 30.5px;
}
.job_seat {
    width: 44px;
    height: 44px;
    display: inline-block;
    text-align: center;
    line-height: 44px;
    background: rgba(204, 204, 204, 1);
    opacity: 1;
    cursor: pointer;
    border-radius: 6px;
}

.Reservations {
    background: #009b3e;
}
.reviewProgress {
    background: #fca418;
}

.Booked {
    background: #fd4e40;
}
.notAllowed {
    background: #cccccc;
}
</style>